<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="flex flex-col md:flex-row h-screen w-full overflow-hidden">
        <!-- 左侧九型人格图解说明区域 - 在移动端隐藏 -->
        <div
            class="hidden md:flex md:w-3/5 bg-gradient-to-br from-purple-700 to-purple-400 text-white p-8 flex-col justify-center items-center relative"
        >
            <div class="max-w-2xl mx-auto text-center">
                <h1 class="text-4xl font-bold mb-6">九型人格测试系统</h1>
                <p class="text-xl mb-8">探索你的性格类型，发现内在潜能</p>
                <!-- 九型人格图 -->
                <div class="relative w-full max-w-md mx-auto mb-8">
                    <img src="~assets/image/jiuxin_image.jpg" alt="九型人格图" class="w-full h-auto rounded-xl shadow-lg" />
                </div>
                <div class="text-left bg-white/10 p-6 rounded-xl backdrop-blur-sm">
                    <ul class="space-y-3">
                        <li class="flex items-center">
                            <i class="fa fa-check-circle mr-2 text-green-300"></i>
                            <span>专业的人格类型评估</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check-circle mr-2 text-green-300"></i>
                            <span>详细的性格分析报告</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check-circle mr-2 text-green-300"></i>
                            <span>个性化成长建议</span>
                        </li>
                    </ul>
                    <!-- <ul class="space-y-2 text-sm">
                        <li><span class="font-bold">第一型：完美主义者</span> - 理性、原则性强、追求完美</li>
                        <li><span class="font-bold">第二型：给予者</span> - 热情、关怀他人、渴望被爱</li>
                        <li><span class="font-bold">第三型：实干家</span> - 自信、适应性强、以成就为导向</li>
                        <li><span class="font-bold">第四型：个人主义者</span> - 敏感、内省、追求独特</li>
                        <li><span class="font-bold">第五型：思想家</span> - 专注、好奇、追求知识</li>
                        <li><span class="font-bold">第六型：忠诚者</span> - 负责任、警觉、寻求安全</li>
                        <li><span class="font-bold">第七型：活跃者</span> - 乐观、自发、追求多样体验</li>
                        <li><span class="font-bold">第八型：领导者</span> - 自信、果断、保护弱者</li>
                        <li><span class="font-bold">第九型：调停者</span> - 平和、包容、追求和谐</li>
                    </ul> -->
                </div>
            </div>
        </div>
        <!-- 右侧登录区域 -->
        <div class="w-full md:w-2/5 flex items-center justify-center p-4 md:p-8 bg-white">
            <div class="w-full max-w-md">
                <!-- Logo和欢迎文字 -->
                <div class="text-center mb-8">
                    <div class="flex justify-center mb-4">
                        <img src="~assets/image/jiuxin_logo.jpg" alt="九型人格系统" class="h-16 w-auto" />
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800">欢迎登录九型人格系统</h2>
                    <p class="text-gray-600 mt-2">探索自我，发现真实的你</p>
                </div>
                <!-- 统一登录入口 -->
                <div class="border-b border-gray-200 mb-6 pb-2">
                    <h3 class="text-lg font-medium text-gray-800">账号登录（支持手机号、邮箱或用户名）</h3>
                    <!-- <p class="text-sm text-gray-500"></p> -->
                </div>
                <!-- 登录表单 -->
                <form @submit.prevent="handleLogin" class="space-y-5">
                    <!-- 统一账号输入框 -->
                    <div>
                        <label for="account" class="block text-sm font-medium text-gray-700 mb-1">账号</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <el-icon><User /></el-icon>
                            </span>
                            <input
                                id="account"
                                type="text"
                                v-model="loginForm.account"
                                placeholder="请输入手机号/邮箱/用户名"
                                class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                                :class="{ 'border-red-500': errors.account }"
                            />
                        </div>
                        <p v-if="errors.account" class="mt-1 text-sm text-red-600">
                            {{ errors.account }}
                        </p>
                    </div>
                    <!-- 密码输入框 -->
                    <div>
                        <div class="flex justify-between mb-1">
                            <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                            <a href="#" class="text-sm text-purple-600 hover:text-purple-800">忘记密码?</a>
                        </div>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <el-icon><Lock /></el-icon>
                            </span>
                            <input
                                id="password"
                                :type="showPassword ? 'text' : 'password'"
                                v-model="loginForm.password"
                                placeholder="请输入密码"
                                class="w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                                :class="{ 'border-red-500': errors.password }"
                            />
                            <button
                                type="button"
                                @click="showPassword = !showPassword"
                                class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 cursor-pointer"
                            >
                                <el-icon v-if="showPassword"><View /></el-icon>
                                <el-icon v-else><Hide /></el-icon>
                            </button>
                        </div>
                        <p v-if="errors.password" class="mt-1 text-sm text-red-600">
                            {{ errors.password }}
                        </p>
                    </div>
                    <!-- 验证码输入框 - 当检测到手机号时显示 -->
                    <div v-if="isPhoneNumber">
                        <label for="verificationCode" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                        <div class="flex space-x-2">
                            <div class="relative flex-1">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <el-icon><ChatLineSquare /></el-icon>
                                </span>
                                <input
                                    id="verificationCode"
                                    type="text"
                                    v-model="loginForm.verificationCode"
                                    placeholder="请输入验证码"
                                    class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                                    :class="{ 'border-red-500': errors.verificationCode }"
                                />
                            </div>
                            <button
                                type="button"
                                @click="sendVerificationCode"
                                :disabled="cooldown > 0"
                                class="whitespace-nowrap px-4 py-2 text-sm font-medium rounded-lg !rounded-button bg-purple-100 text-purple-700 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                                {{ cooldown > 0 ? `${cooldown}秒后重发` : '获取验证码' }}
                            </button>
                        </div>
                        <p v-if="errors.verificationCode" class="mt-1 text-sm text-red-600">
                            {{ errors.verificationCode }}
                        </p>
                    </div>
                    <!-- 图形验证码 - 当检测到用户名或邮箱时显示 -->
                    <div v-if="!isPhoneNumber" class="flex space-x-2 items-end">
                        <!-- 修改为items-end实现底部对齐 -->
                        <div class="flex-1">
                            <label for="captcha" class="block text-sm font-medium text-gray-700 mb-1"
                                >图形验证码
                                <span v-if="errors.captcha" class="text-red-600">
                                    {{ errors.captcha }}
                                </span>
                            </label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <el-icon><picture /></el-icon>
                                </span>
                                <input
                                    id="captcha"
                                    type="text"
                                    v-model="loginForm.captcha"
                                    placeholder="请输入验证码"
                                    class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                                    :class="{ 'border-red-500': errors.captcha }"
                                />
                            </div>
                        </div>

                        <div class="h-12 w-24 flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden cursor-pointer" @click="refreshCaptcha">
                            <img :src="captchaImage" alt="验证码" class="w-full h-full object-cover" />
                        </div>
                    </div>

                    <!-- 记住密码选项 -->
                    <div class="flex items-center">
                        <input
                            id="remember"
                            type="checkbox"
                            v-model="loginForm.remember"
                            class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
                        />
                        <label for="remember" class="ml-2 block text-sm text-gray-700">记住我</label>
                    </div>
                    <!-- 登录按钮 -->
                    <button
                        type="submit"
                        class="w-full py-2.5 px-4 !rounded-button font-medium text-white bg-gradient-to-r from-purple-600 to-purple-800 hover:from-purple-700 hover:to-purple-900 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 shadow-md transition-all flex justify-center items-center"
                        :disabled="isLoading"
                    >
                        <span v-if="isLoading" class="mr-2">
                            <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path
                                    class="opacity-75"
                                    fill="currentColor"
                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                ></path>
                            </svg>
                        </span>
                        <span>{{ isLoading ? '登录中...' : '登 录' }}</span>
                    </button>
                    <!-- 三方登录 -->
                    <div class="mt-6">
                        <div class="relative">
                            <div class="absolute inset-0 flex items-center">
                                <div class="w-full border-t border-gray-300"></div>
                            </div>
                            <div class="relative flex justify-center text-sm">
                                <span class="px-2 bg-white text-gray-500">其他登录方式</span>
                            </div>
                        </div>
                        <div class="mt-6 grid grid-cols-3 gap-3">
                            <button
                                type="button"
                                @click="showWechatModal = true"
                                class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg !rounded-button shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
                            >
                                <div class="flex items-center">
                                    <img src="~/assets/image/wechat.png" alt="微信" class="h-5 w-5 mr-2" />
                                    <span>微信</span>
                                </div>
                            </button>
                            <button
                                type="button"
                                @click="showAlipayModal = true"
                                class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg !rounded-button shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
                            >
                                <div class="flex items-center">
                                    <img src="~assets/image/alipay.png" alt="支付宝" class="h-5 w-5 mr-2" />
                                    <span>支付宝</span>
                                </div>
                            </button>
                            <button
                                type="button"
                                @click="showWeiboModal = true"
                                class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg !rounded-button shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
                            >
                                <div class="flex items-center">
                                    <span><i class="fa fa-weibo text-xl mr-2 h-5 w-5 text-red-500"></i>微博</span>
                                </div>
                            </button>
                        </div>
                    </div>
                    <!-- 注册入口 -->
                    <!-- <div class="text-center mt-6">
                        <p class="text-sm text-gray-600">
                            还没有账号?
                            <a href="#" class="font-medium text-purple-600 hover:text-purple-800">立即注册</a>
                        </p>
                    </div> -->
                </form>
                <!-- 手机扫码登录 -->
                <div class="mt-8 p-4 border border-gray-200 rounded-lg">
                    <div class="flex items-center">
                        <div class="qrcode-container mr-4">
                            <div class="w-20 h-20 bg-gray-200 rounded flex items-center justify-center">
                                <i class="fa fa-qrcode text-3xl text-gray-400"></i>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-medium text-gray-800">手机扫码登录</h3>
                            <p class="text-sm text-gray-600">打开手机应用扫描二维码</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 支付宝登录模态窗口 -->
        <div v-if="showAlipayModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50">
            <div class="bg-white rounded-xl shadow-xl max-w-md w-full p-6 relative">
                <!-- 关闭按钮 -->
                <button @click="showAlipayModal = false" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 focus:outline-none">
                    <el-icon class="text-xl"><Close /></el-icon>
                </button>
                <!-- 标题 -->
                <div class="text-center mb-6">
                    <img
                        src="https://readdy.ai/api/search-image?query=alipay%20logo%2C%20blue%20color%20scheme%2C%20minimalist%20design%2C%20professional%20branding%2C%20centered%20composition%2C%20high%20quality%20vector%20graphic%2C%20transparent%20background&width=60&height=60&seq=alipaylogo1&orientation=squarish"
                        alt="支付宝"
                        class="h-12 w-auto mx-auto mb-3"
                    />
                    <h3 class="text-xl font-bold text-gray-800">支付宝扫码登录</h3>
                    <p class="text-gray-600 mt-1 text-sm">请使用支付宝 App 扫描二维码登录</p>
                </div>
                <!-- 二维码区域 -->
                <div class="flex flex-col items-center justify-center mb-6">
                    <div class="w-48 h-48 border border-gray-200 rounded-lg p-2 relative" @click="simulateAlipayLogin">
                        <img :src="alipayQRCode" alt="支付宝登录二维码" class="w-full h-full object-contain" />
                        <!-- 扫码状态覆盖层 -->
                        <div
                            v-if="scanStatus === 'scanning'"
                            class="absolute inset-0 bg-white bg-opacity-80 flex flex-col items-center justify-center"
                        >
                            <div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mb-2"></div>
                            <p class="text-blue-500 font-medium">正在授权...</p>
                        </div>
                        <div
                            v-if="scanStatus === 'success'"
                            class="absolute inset-0 bg-white bg-opacity-80 flex flex-col items-center justify-center"
                        >
                            <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-2">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    class="h-8 w-8 text-green-500"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    stroke="currentColor"
                                >
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                            <p class="text-green-500 font-medium">授权成功</p>
                        </div>
                    </div>
                    <p class="text-gray-500 text-xs mt-3">点击二维码可模拟扫码过程</p>
                    <div class="mt-4 text-sm text-gray-600 flex items-center">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-5 w-5 text-yellow-500 mr-1"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                            />
                        </svg>
                        <span>请确保使用支付宝最新版本</span>
                    </div>
                </div>
                <!-- 底部按钮 -->
                <div class="flex flex-col space-y-3">
                    <button
                        @click="showAlipayModal = false"
                        class="w-full py-2 !rounded-button text-sm font-medium text-purple-600 border border-purple-200 hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
                    >
                        使用其他方式登录
                    </button>
                    <div class="text-center">
                        <a href="#" class="text-xs text-gray-500 hover:text-purple-600">遇到问题?</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 微信登录模态窗口 -->
        <div v-if="showWechatModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50">
            <div class="bg-white rounded-xl shadow-xl max-w-md w-full p-6 relative">
                <!-- 关闭按钮 -->
                <button @click="showWechatModal = false" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 focus:outline-none">
                    <el-icon class="text-xl"><Close /></el-icon>
                </button>
                <!-- 标题 -->
                <div class="text-center mb-6">
                    <img
                        src="https://readdy.ai/api/search-image?query=wechat%20logo%2C%20green%20color%20scheme%2C%20minimalist%20design%2C%20professional%20branding%2C%20centered%20composition%2C%20high%20quality%20vector%20graphic%2C%20transparent%20background&width=60&height=60&seq=wechatlogo1&orientation=squarish"
                        alt="微信"
                        class="h-12 w-auto mx-auto mb-3"
                    />
                    <h3 class="text-xl font-bold text-gray-800">微信扫码登录</h3>
                    <p class="text-gray-600 mt-1 text-sm">请使用微信 App 扫描二维码登录</p>
                </div>
                <!-- 二维码区域 -->
                <div class="flex flex-col items-center justify-center mb-6">
                    <div class="w-48 h-48 border border-gray-200 rounded-lg p-2 relative" @click="simulateWechatLogin">
                        <img :src="wechatQRCode" alt="微信登录二维码" class="w-full h-full object-contain" />
                        <!-- 扫码状态覆盖层 -->
                        <div
                            v-if="wechatScanStatus === 'scanning'"
                            class="absolute inset-0 bg-white bg-opacity-80 flex flex-col items-center justify-center"
                        >
                            <div class="w-8 h-8 border-4 border-green-500 border-t-transparent rounded-full animate-spin mb-2"></div>
                            <p class="text-green-500 font-medium">正在授权...</p>
                        </div>
                        <div
                            v-if="wechatScanStatus === 'success'"
                            class="absolute inset-0 bg-white bg-opacity-80 flex flex-col items-center justify-center"
                        >
                            <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-2">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    class="h-8 w-8 text-green-500"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    stroke="currentColor"
                                >
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                            <p class="text-green-500 font-medium">授权成功</p>
                        </div>
                    </div>
                    <p class="text-gray-500 text-xs mt-3">点击二维码可模拟扫码过程</p>
                    <div class="mt-4 text-sm text-gray-600 flex items-center">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-5 w-5 text-yellow-500 mr-1"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                            />
                        </svg>
                        <span>请确保使用微信最新版本</span>
                    </div>
                </div>
                <!-- 底部按钮 -->
                <div class="flex flex-col space-y-3">
                    <button
                        @click="showWechatModal = false"
                        class="w-full py-2 !rounded-button text-sm font-medium text-purple-600 border border-purple-200 hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
                    >
                        使用其他方式登录
                    </button>
                    <div class="text-center">
                        <a href="#" class="text-xs text-gray-500 hover:text-purple-600">遇到问题?</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 微博登录模态窗口 -->
        <div v-if="showWeiboModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50">
            <div class="bg-white rounded-xl shadow-xl max-w-md w-full p-6 relative">
                <!-- 关闭按钮 -->
                <button @click="showWeiboModal = false" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 focus:outline-none">
                    <el-icon class="text-xl"><Close /></el-icon>
                </button>
                <!-- 标题 -->
                <div class="text-center mb-6">
                    <i class="fa fa-weibo text-xl text-red-500"></i>
                    <p class="text-gray-600 mt-1 text-sm">请使用微博 App 扫描二维码登录</p>
                </div>
                <!-- 二维码区域 -->
                <div class="flex flex-col items-center justify-center mb-6">
                    <div class="w-48 h-48 border border-gray-200 rounded-lg p-2 relative" @click="simulateWeiboLogin">
                        <img :src="weiboQRCode" alt="微博登录二维码" class="w-full h-full object-contain" />
                        <!-- 扫码状态覆盖层 -->
                        <div
                            v-if="weiboScanStatus === 'scanning'"
                            class="absolute inset-0 bg-white bg-opacity-80 flex flex-col items-center justify-center"
                        >
                            <div class="w-8 h-8 border-4 border-red-500 border-t-transparent rounded-full animate-spin mb-2"></div>
                            <p class="text-red-500 font-medium">正在授权...</p>
                        </div>
                        <div
                            v-if="weiboScanStatus === 'success'"
                            class="absolute inset-0 bg-white bg-opacity-80 flex flex-col items-center justify-center"
                        >
                            <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mb-2">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    class="h-8 w-8 text-red-500"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    stroke="currentColor"
                                >
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                            <p class="text-red-500 font-medium">授权成功</p>
                        </div>
                    </div>
                    <p class="text-gray-500 text-xs mt-3">点击二维码可模拟扫码过程</p>
                    <div class="mt-4 text-sm text-gray-600 flex items-center">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-5 w-5 text-yellow-500 mr-1"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                            />
                        </svg>
                        <span>请确保使用微博最新版本</span>
                    </div>
                </div>
                <!-- 底部按钮 -->
                <div class="flex flex-col space-y-3">
                    <button
                        @click="showWeiboModal = false"
                        class="w-full py-2 !rounded-button text-sm font-medium text-purple-600 border border-purple-200 hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
                    >
                        使用其他方式登录
                    </button>
                    <div class="text-center">
                        <a href="#" class="text-xs text-gray-500 hover:text-purple-600">遇到问题?</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Message, Iphone, User, Lock, View, Hide, ChatLineSquare, Picture, Close } from '@element-plus/icons-vue'

import { useSiteConfig } from '/@/stores/siteConfig'
import { useMemberCenter } from '/@/stores/memberCenter'
import { sendEms, sendSms } from '/@/api/common'
import { uuid } from '/@/utils/random'
import { buildValidatorData, validatorAccount } from '/@/utils/validate'
import { checkIn, retrievePassword } from '/@/api/frontend/user/index'
import { useUserInfo } from '/@/stores/userInfo'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import clickCaptcha from '/@/components/clickCaptcha'
// 微博登录模态窗口状态
const showWeiboModal = ref(false)
// 微博二维码图片
const weiboQRCode = ref(
    'https://readdy.ai/api/search-image?query=weibo%20QR%20code%20for%20login%20authentication%2C%20red%20color%20scheme%2C%20digital%20social%20media%20system%2C%20mobile%20verification%2C%20secure%20login%20interface%2C%20centered%20composition%2C%20high%20quality%20vector%20graphic&width=200&height=200&seq=weiboqr1&orientation=squarish'
)
// 微博扫码状态
const weiboScanStatus = ref('waiting') // waiting, scanning, success
// 登录表单数据
const loginForm = ref({
    account: '',
    password: '',
    verificationCode: '',
    captcha: '',
    remember: false,
})
// 表单错误信息
const errors = ref({
    account: '',
    password: '',
    verificationCode: '',
    captcha: '',
})
// 密码显示状态
const showPassword = ref(false)
// 加载状态
const isLoading = ref(false)
// 验证码冷却时间
const cooldown = ref(0)
let cooldownTimer: number | null = null
// 图形验证码
const captchaImage = ref(
    'https://readdy.ai/api/search-image?query=abstract%20captcha%20image%20with%20random%20colorful%20patterns%20and%20numbers%2C%20security%20verification%20code%2C%20digital%20authentication%2C%20modern%20web%20design%20element%2C%20centered%20composition&width=120&height=60&seq=captcha1&orientation=landscape'
)
// 支付宝登录模态窗口状态
const showAlipayModal = ref(false)
// 支付宝二维码图片
const alipayQRCode = ref(
    'https://readdy.ai/api/search-image?query=alipay%20QR%20code%20for%20login%20authentication%2C%20blue%20color%20scheme%2C%20digital%20payment%20system%2C%20mobile%20payment%20verification%2C%20secure%20login%20interface%2C%20centered%20composition%2C%20high%20quality%20vector%20graphic&width=200&height=200&seq=alipayqr1&orientation=squarish'
)
// 支付宝扫码状态
const scanStatus = ref('waiting') // waiting, scanning, success
// 微信登录模态窗口状态
const showWechatModal = ref(false)
// 微信二维码图片
const wechatQRCode = ref(
    'https://readdy.ai/api/search-image?query=wechat%20QR%20code%20for%20login%20authentication%2C%20green%20color%20scheme%2C%20digital%20payment%20system%2C%20mobile%20payment%20verification%2C%20secure%20login%20interface%2C%20centered%20composition%2C%20high%20quality%20vector%20graphic&width=200&height=200&seq=wechatqr1&orientation=squarish'
)
// 微信扫码状态
const wechatScanStatus = ref('waiting') // waiting, scanning, success
// 模拟支付宝扫码登录
const simulateAlipayLogin = () => {
    scanStatus.value = 'scanning'
    setTimeout(() => {
        scanStatus.value = 'success'
        setTimeout(() => {
            showAlipayModal.value = false
            // 模拟登录成功
            isLoading.value = true
            setTimeout(() => {
                isLoading.value = false
                console.log('支付宝登录成功')
                // 这里可以添加登录成功后的跳转逻辑
            }, 1000)
        }, 1000)
    }, 2000)
}
// 模拟微信扫码登录
const simulateWechatLogin = () => {
    wechatScanStatus.value = 'scanning'
    setTimeout(() => {
        wechatScanStatus.value = 'success'
        setTimeout(() => {
            showWechatModal.value = false
            // 模拟登录成功
            isLoading.value = true
            setTimeout(() => {
                isLoading.value = false
                console.log('微信登录成功')
                // 这里可以添加登录成功后的跳转逻辑
            }, 1000)
        }, 1000)
    }, 2000)
}
// 判断输入的账号类型
const isPhoneNumber = computed(() => {
    const phoneRegex = /^1[3-9]\d{9}$/
    return phoneRegex.test(loginForm.value.account)
})

// 模拟微博扫码登录
const simulateWeiboLogin = () => {
    weiboScanStatus.value = 'scanning'
    setTimeout(() => {
        weiboScanStatus.value = 'success'
        setTimeout(() => {
            showWeiboModal.value = false
            // 模拟登录成功
            isLoading.value = true
            setTimeout(() => {
                isLoading.value = false
                console.log('微博登录成功')
                // 这里可以添加登录成功后的跳转逻辑
            }, 1000)
        }, 1000)
    }, 2000)
}
// 发送验证码
const sendVerificationCode = () => {
    // 验证手机号
    const phoneRegex = /^1[3-9]\d{9}$/
    if (!loginForm.value.account) {
        errors.value.account = '请输入手机号'
        return
    }
    if (!phoneRegex.test(loginForm.value.account)) {
        errors.value.account = '请输入正确的手机号'
        return
    }
    errors.value.account = ''

    // 模拟发送验证码
    cooldown.value = 60
    cooldownTimer = window.setInterval(() => {
        cooldown.value--
        if (cooldown.value <= 0 && cooldownTimer) {
            clearInterval(cooldownTimer)
            cooldownTimer = null
        }
    }, 1000)
}
// 刷新图形验证码
const refreshCaptcha = () => {
    // 模拟刷新验证码
    const timestamp = new Date().getTime()
    captchaImage.value = `https://readdy.ai/api/search-image?query=abstract%20captcha%20image%20with%20random%20colorful%20patterns%20and%20numbers%2C%20security%20verification%20code%2C%20digital%20authentication%2C%20modern%20web%20design%20element%2C%20centered%20composition&width=120&height=60&seq=captcha${timestamp}&orientation=landscape`
}
// 验证账号
const validateAccount = () => {
    if (!loginForm.value.account) {
        errors.value.account = '请输入账号'
        return false
    }

    const phoneRegex = /^1[3-9]\d{9}$/
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    const usernameRegex = /^[a-zA-Z0-9_]{4,30}$/
    // 判断是手机号、邮箱还是用户名
    if (phoneRegex.test(loginForm.value.account)) {
        // 是手机号
        errors.value.account = ''
        return true
    } else if (emailRegex.test(loginForm.value.account)) {
        // 是邮箱
        errors.value.account = ''
        return true
    } else if (loginForm.value.account.length >= 3 && usernameRegex.test(loginForm.value.account)) {
        // 视为用户名，长度至少3个字符
        errors.value.account = ''
        return true
    } else {
        errors.value.account = '请输入正确的手机号/邮箱/用户名（数字、字母、下划线、中划线）'
        return false
    }
}
// 验证密码
const validatePassword = () => {
    if (!loginForm.value.password) {
        errors.value.password = '请输入密码'
        return false
    }
    if (loginForm.value.password.length < 6) {
        errors.value.password = '密码长度不能小于6个字符'
        return false
    }
    errors.value.password = ''
    return true
}
// 验证验证码
const validateVerificationCode = () => {
    if (isPhoneNumber.value && !loginForm.value.verificationCode) {
        errors.value.verificationCode = '请输入验证码'
        return false
    }
    errors.value.verificationCode = ''
    return true
}
// 验证图形验证码
const validateCaptcha = () => {
    if (!isPhoneNumber.value && !loginForm.value.captcha) {
        errors.value.captcha = '请输入图形验证码'
        return false
    }
    errors.value.captcha = ''
    return true
}
// 表单验证
const validateForm = () => {
    let isValid = true

    // 验证账号
    isValid = validateAccount() && isValid

    // 验证密码
    isValid = validatePassword() && isValid

    // 验证验证码
    isValid = validateVerificationCode() && isValid

    // 验证图形验证码
    isValid = validateCaptcha() && isValid

    return isValid
}
// 处理登录
const handleLogin = async () => {
    // 表单验证
    if (!validateForm()) {
        return
    }
    // 模拟登录请求
    isLoading.value = true
    try {
        // 模拟网络请求延迟
        await new Promise((resolve) => setTimeout(resolve, 1500))
        // 模拟登录成功
        console.log('登录成功', loginForm.value)
        // 这里可以添加登录成功后的跳转逻辑
    } catch (error) {
        console.error('登录失败', error)
    } finally {
        isLoading.value = false
    }
}
// 组件卸载时清除定时器
onUnmounted(() => {
    if (cooldownTimer) {
        clearInterval(cooldownTimer)
        cooldownTimer = null
    }
})
// 组件挂载时刷新验证码
onMounted(() => {
    refreshCaptcha()
})
</script>

<style scoped>
/* 自定义样式 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type='number'] {
    -moz-appearance: textfield;
}
/* 输入框获取焦点时的动画效果 */
input:focus {
    transition: all 0.2s ease-in-out;
}
/* 按钮点击效果 */
button:active:not(:disabled) {
    transform: scale(0.98);
}
</style>
